<template>
  <div class="Tables">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
       <el-table-column prop="title"   label="规则名称"  align="center"></el-table-column>
       <el-table-column prop="type"   label="规则类型"  align="center">
         <template slot-scope="scope">
           <span>{{scope.row.type.title}}</span>
         </template>
       </el-table-column>
       <el-table-column prop="detail"   label="比例/金额" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.detail.title}}</span>
        </template>
       </el-table-column>
       <el-table-column prop="rule"   label="结算规则"  align="center">
         <template slot-scope="scope">
           <span>{{scope.row.rule.title}}</span>
         </template>
       </el-table-column>
       <el-table-column prop="status"   label="是否启用"  align="center">
         <template slot-scope="scope">
           <span v-if="scope.row.status==1">启用</span>
           <span v-if="scope.row.status==2">禁用</span>
         </template>
       </el-table-column>
       <el-table-column prop="operate_user"   label="创建人"  align="center"></el-table-column>
       <el-table-column prop="create_time"   label="创建时间"  align="center"></el-table-column>
       <el-table-column prop="name"   label="操作"  align="center" v-if="checkPermission(['jointRuleEdit','jointRuleDelete'])">
          <template slot-scope="scope">
             <span class="edittext" v-if="checkPermission(['jointRuleEdit'])" @click='editform(scope.row.id)'>编辑</span>
             <span class="edittext" v-if="checkPermission(['jointRuleDelete'])" @click="delitem(scope.row.id)">删除</span>
          </template>
        </el-table-column>


    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="pages.total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {updatestate} from '@/api/enroll'
import { mapGetters } from 'vuex'
 //按钮权限验证
  import checkPermission from "@/utils/permission";
export default {
  data() {
    return {

      // 当前页码
	pagenum: 1,
	// 页面显示条数
	pagesize: 10,
	// 总页数
	total: 0,
      //表格数据
      tableData: [],
      //页码数据
      pages:{},
      currentPage4:4,
    }
  },
  props: {
     //表格数据
    tabData:{
      type:Object,
      default:()=>{
        return {}
      }
    },

  },
  computed:{
    ...mapGetters({
        permissions: 'user/permissions',
      }),

  }
,
  methods: {
    checkPermission,
    //编辑
    editform(id){
      let params = {
        id,
        type:1
      }
      //通知父组件打开弹窗
      this.$emit('editform',params)
    },
    //删除
    delitem(id){
      this.$emit('delitem',id)

    },
    //审核状态 提示
    renderTip(h, { column }) {
      return h(
        'div',
        {
          style: 'display:flex;margin:0 auto; justify-content: center;',
        },
        [
          h('span', column.label),
          h('promptmessage', {
            props: {
              messages: ['提交的审核信息将在审核通过后才可同步展示'],
            },
          }),
        ]
      )
    },
    //翻页
    handleSizeChange(val) {
      this.$emit('changepageTotal',val)
      },
      //翻页触发事件
      handleCurrentChange(val) {
        this.$emit('changepage',val)
      },
      //editform
  },
  components:{
  },
  mounted(){
    this.tableData = this.tabData.list
    this.pages = this.tabData.page
  },
  watch:{
   tabData(val){
    this.tableData = val.list
      this.pages = val.page

   }
  },
  updated(){
  }
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
  font-size: 13px;
}
</style>
